<style>
    .number{
        margin: 10%;
        --line-width:5px;
        --line-length:50px;
        --line-gap:10px;
        position: relative;
        width:calc(var(--line-length) + var(--line-gap));
        height: calc(var(--line-length) * 2 + var(--line-gap));
        transform-style: preserve-3d;
    }

    .line{
        background-color: cyan;
        border-radius: calc(var(--line-width) / 2);
        position: absolute;
        animation-duration: .2s;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
    }
    .line.H {
        width:var(--line-length);
        height:var(--line-width);
    }

    .line.V{
        width:var(--line-width);
        height:var(--line-length);
    }
    .line.V.L{
        left:calc(-1* var(--line-gap));
    }
    .line.V.R{
        right:0;
    }
    .line.H.U{
        top:calc(-1 * var(--line-gap))
    }
    .line.H.D{
        bottom:calc(-1 * var(--line-gap))
    }

    .line.H.M{
        top:calc(var(--line-length))
    }
    .line.V.D{
        bottom: 0;
    }

    .number.zero>.line.H.M{
        animation-name: h-gone;
    }

    .number.one>.line.H{
        /* animation: name duration timing-function delay iteration-count direction fill-mode; */
        animation-name: h-gone;
    }
    .number.one>.line.V.L{
        animation-name: v-gone;
    }

    .number.two>.line.V.L.U,
    .number.two>.line.V.R.D{
        animation-name: v-gone;
    }

    .number.three>.line.L{
        animation-name: v-gone;
    }


    .number.four>.line.H.U,
    .number.four>.line.H.D{
        animation-name: h-gone;
    }
    .number.four>.line.V.L.D{
        animation-name: v-gone;
    }

    .number.five>.line.V.L.D,
    .number.five>.line.V.R.U{
        animation-name: v-gone;
    }

    .number.six>.line.V.R.U{
        animation-name: h-gone;
    }

    .number.seven>.line.V.L{
        animation-name: v-gone;
    }
    .number.seven>.line.H.M,
    .number.seven>.line.H.D{
        animation-name: h-gone;
    }

    .number.eight>.line{
        animation-name: none;
    }

    .number.nine>.line.V.L.D{
        animation-name: v-gone;
    }
    @keyframes h-gone {
        0%{
            transform: rotateY(0);
        }
        100%{
            transform:rotateY(90deg);
        }
    }
    @keyframes v-gone {
        0%{
            transform: rotateX(0);
        }
        100%{
            transform:rotateX(90deg);
        }
    }
</style>

<div class="number zero">
    <div class="line V L U"></div>
    <div class="line V L D"></div>
    <div class="line H U"></div>
    <div class="line H M"></div>
    <div class="line H D"></div>
    <div class="line V R U"></div>
    <div class="line V R D"></div>
</div>

<script>
        let i=0;
        numbers=['zero','one','two','three','four','five','six','seven','eight','nine']
        setInterval(function() {
            document.querySelector('.number').className=`number ${numbers[i%10]}`;
            i++;
        },1000)

    
</script>